<script setup>
import MetaCode from "@/components/MetaCode.vue"
import Meta3Part from "@/components/Meta3Part.vue"
import {render, state} from '@/utils/tmpl.js'

// 样例、模板、渲染结果选项
const result = computed(() => {
  try {
    const jsonData = JSON.parse(state.data)
    return render('art', state.tmpl, jsonData)
  } catch (e) {
    return '数据区域JSON解析错误，请修改！'
  }
})
</script>

<template>
  <meta3-part>
    <template v-slot:header>
      <MetaCode v-model:value="state.data" language="json"/>
      <div class="link">
<!--        <el-link href="https://goofychris.github.io/art-template/zh-cn/docs/imports.html" target="_blank" styles="margin-right: 10px">art</el-link>-->
<!--        <el-link href="https://dayjs.fenxianglu.cn/category" target="_blank" styles="margin-right: 10px">dayjs</el-link>-->
<!--        <el-link href="https://www.lodashjs.com" target="_blank" styles="margin-right: 10px">lodash</el-link>-->
      </div>
      <div class="hint">
<!--        <el-select v-model="state.tmpl" styles="width: 150px">-->
<!--          <el-option v-for="item in store.templateEngineData" :key="item.id" :value="item.name" :label="item">-->
<!--            <meta-icon :name="item.name" :icon="item.lang"/>-->
<!--          </el-option>-->
<!--          <template #label="{ label, value }">-->
<!--            <meta-icon :name="label.name" :icon="label.lang"/>-->
<!--          </template>-->
<!--        </el-select>-->
<!--        <meta-icon icon="el-icon-notebook" name="帮助手册" tooltip styles="margin: 0 10px"></meta-icon>-->
        <span>JSON</span>
      </div>
    </template>

    <template v-slot:main>
      <MetaCode v-model:value="state.tmpl" language="java"/>
      <div class="hint">
        <a href="https://goofychris.github.io/art-template/zh-cn/docs/index.html"
           target="_blank"
           style="text-decoration: none"
        >Art 模板</a>
      </div>
    </template>

    <template v-slot:right>
      <MetaCode :value="result" language="java" readonly/>
      <div class="hint">渲染</div>
    </template>
  </meta3-part>
</template>

<style scoped lang="scss">
.hint {
  font-size: 22px;
  color: pink;

  position: absolute;
  bottom: 10px;
  right: 10px;

  display: flex;
}

.link {
  position: absolute;
  bottom: 10px;
  left: 50px;
}

.codemirror-opacity {
  opacity: 0.8;
}
</style>